﻿/*

Project     : DAdmin - Responsive Bootstrap HTML Admin Dashboard
Version     : 1.1
Author      : ThemeLooks
Author URI  : http://www.bootstrapmb.com/item/2664
//可以参考 https://www.cnblogs.com/laramia/p/10731072.html

*/

(function ($) {
    "use strict";

    /* ------------------------------------------------------------------------- *
     * COMMON VARIABLES
     * ------------------------------------------------------------------------- */
    var $wn = $(window),
        $document = $(document),
        $body = $('body');

    $(function () {
        /* ------------------------------------------------------------------------- *
         * CALENDAR EVENTS
         * ------------------------------------------------------------------------- */
        var $calendarEvents = $('.calendar--events'),
            $calendarEventsEl = $calendarEvents.children('.fc-events'),
            $calendarEventEl = $calendarEventsEl.children('.fc-event'),
            $calendarEventsInput = $calendarEvents.find('.form-check-input');

        if ($calendarEvents.length) {
            $calendarEventEl.each(function () {
                var $el = $(this),
                    bgColor = $el.css('background-color');

                $el.draggable({
                    revert: true,
                    revertDuration: 0,
                    zIndex: 999
                })
                    .css({
                        'border-color': bgColor
                    })
                    .data('event', {
                        title: $el.text(),
                        color: bgColor,
                        stick: true
                    });
            });
        }

        $calendarEvents.on('click', '.calendar--event__colors li', function () {
            var $el = $(this);

            $el.addClass('active').siblings().removeClass('active');
        });

        $calendarEvents.on('submit', 'form', function (e) {
            e.preventDefault();

            var $el = $(this),
                $input = $el.children('input'),
                $event = $('<div></div>'),
                $colorClass = $calendarEvents.find('.calendar--event__colors .active'),
                $bdColor = $colorClass.css('background-color');

            $event.draggable({
                revert: true,
                revertDuration: 0,
                zIndex: 999
            })
                .css({
                    'border-color': $bdColor
                })
                .data('event', {
                    title: $input.val(),
                    color: $bdColor,
                    stick: true
                })
                .addClass(' fc-event ' + $colorClass.attr('class'))
                .text($input.val())
                .appendTo($calendarEventsEl);
        });

        /* ------------------------------------------------------------------------- *
         * CALENDAR APP
         * ------------------------------------------------------------------------- */
        var $calendarApp = $('#calendarApp');

        if ($calendarApp.length) {
            $calendarApp.fullCalendar({
                header: {
                    left: '',
                    center: 'prev next title',
                    right: 'today basicDay basicWeek month'
                },
                locale: 'zh-cn',
                editable: false,//是否可编辑，即进行可拖动和缩放操作。
                droppable: false,
                resizable: false,
                height: $(window).height() - 30, //'auto'
                windowResize: function (view) {  //控制界面随窗口拖动自适应
                    $calendarApp.fullCalendar('option', 'height', $(window).height() - 30); 
                },
                drop: function () {
                    if ($calendarEventsInput.is(':checked')) {
                        $(this).remove();
                    }
                },
                //日程开始拖拽时触发
                eventDragStart: function (event, jsEvent, ui, view) {
                    console.log('拖拽开始')
                },
                //日程拖拽停止时触发
                eventDragStop: function (event, jsEvent, ui, view) {
                    console.log('拖拽停止')
                },
                //日程拖拽完成，并且时间改变时触发，dayDelta日程前后移动了多少天
                eventDrop: function (event, dayDelta, revertFunc, jsEvent, ui, view) {
                    // console.log('eventDrop被执行，Event的title是：', event.title);
                    if (dayDelta._days != 0) {
                        console.log('eventDrop被执行，Event的start和end时间改变了：', dayDelta._days + '天！');
                    } else if (dayDelta._milliseconds != 0) {
                        console.log('eventDrop被执行，Event的start和end时间改变了：', dayDelta._milliseconds / 1000 + '秒！');
                    } else {
                        console.log('eventDrop被执行，Event的start和end时间没有改变！');
                    }
                },
                //日程大小调整开始时触发
                eventResizeStart: function (event, jsEvent, ui, view) {
                    console.log('调整开始')
                },
                //日程大小调整停止时触发
                eventResizeStop: function (event, jsEvent, ui, view) {
                    console.log('调整停止')
                },
                //日程大小调整完成并已经执行更新时触发
                eventResize: function (event, dayDelta, revertFunc, jsEvent, ui, view) {
                    console.log(event.id + '调整完成,时间改变了' + dayDelta._days + '天')
                },
                timeFormat: 'h(:mm)a',
                events: function (start, end, timezone, callback) {
                    console.log('events')
                    frame.ajax({
                        url: "/Sale/Project/GetDashBoardDetail",
                        type: 'get',
                        success: function (obj) {
                            if (obj.success) {
                                var events = [];
                                $.each(obj.data, function (i, n) { 
                                    events.push({
                                        id: n.Id,
                                        tripPreAlarmDay: n.TripPreAlarmDay,
                                        title: n.Name,
                                        className: n.Color,
                                        start: moment(n.DepartureDate).format('YYYY-MM-DD'),
                                        end: moment(n.ReturnDate).add(1, 'd').format('YYYY-MM-DD')//这里的注意点，event的start和end只有是"YYY-MM-DD"格式才能在日历内resize范围，带时分秒则不可以，且end+1表示实际的end日期
                                    });
                                });
                                callback(events);//回调渲染ajax获取的的数据
                            }
                            else {
                                frame.msgError(obj.message);
                            }
                        }
                    });
                },
                //当日程事件渲染时触发
                eventRender: function (event, element) {
                    console.log('eventRender')
                    element.find(".fc-title").html(event.title);
                    //$('.fc-content-skeleton table').height($('.fc-day-grid .fc-widget-content').height()) 
                },
                //当点击日历中的某一日程（事件）时，触发此操作
                eventClick: function (event, jsEvent) {
                    console.log('eventClick')
                }
            });
        }
    }); 
}(jQuery));